<!-- 发布任务弹窗 -->
<style scoped>
  .publish-task-dialog /deep/ .ivu-form-item{
    margin-bottom: 5px;
  }
</style>

<template>
  <div class="publish-task-dialog">
    <Modal
      v-model="publishTaskDialog.visible"
      title="发布任务"
      @on-ok="ok"
      @on-cancel="cancel">
      <Form :model="taskInfo" :label-width="60">
        <FormItem label="任务内容">
          <Input v-model="taskInfo.content" type="textarea" :autosize="{minRows: 4,maxRows: 10}" placeholder="请输入发布内容..."></Input>
        </FormItem>
        <FormItem label="任务等级">
          <Rate v-model="taskInfo.level" />
        </FormItem>
        <FormItem label="结束时间">
          <DatePicker v-model="taskInfo.endDate" type="date" placeholder="请选择" style="width: 200px"></DatePicker>
        </FormItem>
        <!--<FormItem label="接收人">-->
          <!--<Select-->
            <!--style="width: 160px;"-->
            <!--v-model="taskInfo.recipient"-->
            <!--filterable-->
            <!--remote-->
            <!--:remote-method="remoteMethod1"-->
            <!--:loading="loading1">-->
            <!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
          <!--</Select>-->
        <!--</FormItem>-->
      </Form>
    </Modal>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import {
  createTask
} from '../api/home'
import moment from 'moment'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      taskInfo: {
        content: '',
        level: 1,
        endDate: moment().add(1, 'days').format()
      },
      loading1: false,
      options1: [],
      recipient: '',
      list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
    }
  },
  computed: {
    ...mapState({
      user: state => state.app.user,
      publishTaskDialog: state => state.app.publishTaskDialog
    })
  },
  methods: {
    async ok () {
      const task = {}
      Object.assign(task, {
        content: this.taskInfo.content,
        createDate: moment().format('YYYY-MM-DD HH:mm:ss'),
        endDate: moment(this.taskInfo.endDate).format('YYYY-MM-DD HH:mm:ss'),
        level: this.taskInfo.level,
        publisher: this.user.userName,
        publisherId: this.user.id,
        status: 1
      })
      const res = await createTask(task)
      if (res.code === 200) {
        this.setNewTask(task)
        this.cancel()
        this.$Notice.success({
          title: '提示',
          desc: '发布成功'
        })
      } else {
        this.$Notice.error({
          title: '提示',
          desc: '发布失败'
        })
      }
    },
    remoteMethod1 (query) {
      if (query !== '') {
        this.loading1 = true
        setTimeout(() => {
          this.loading1 = false
          const list = this.list.map(item => {
            return {
              value: item,
              label: item
            }
          })
          this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }, 200)
      } else {
        this.options1 = []
      }
    },
    cancel () {
      this.setPublishTaskDialog({
        visible: false
      })
    },
    ...mapMutations([
      'setNewTask',
      'setPublishTaskDialog'
    ])
  }
}
</script>
